<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>08-箭头函数的this</title>
</head>
<body>
    <button class="btn1">点击</button>
    <button class="btn2">2秒后启用</button>
    <script>
        // 1. 以前this的指向： 指向调用者
        // console.log(this) // window

        // // 普通函数
        // function fn() {
        //     console.log(this)// window
        // }
        // // window.fn()
        // fn()

        // // 对象方法里面的this
        // const obj = {
        //     name:'周祺',
        //     playGame:function () {
        //         console.log(this) // obj
        //     }
        // }
        // obj.playGame()


        // 2.箭头函数中的this指向 - 沿用上一层作用域的this
        // const fn = () => {
        //     console.log(this) // window
        // }
        // fn()

        // const obj = {
        //     name:'周祺',
        //     playGame:() => {
        //         console.log(this) // window
        //     }
        // }
        // obj.playGame()

        // const obj1 = {
        //     name:'周祺',
        //     playGame:function() {
        //         const fun = () => {
        //             console.log(this) // obj
        //         }
        //         fun()
        //     }
        // }
        // obj1.playGame()

        // 3.我们可以 根据需求 来 选择 是否使用箭头函数 this
        // document.querySelector('.btn1').addEventListener('click',function(){
        //     this.style.color = 'red'
        // })

        // document.querySelector('.btn1').addEventListener('click',() => {
        //     // this.style.color = 'pink'
        //     // 此处不能用 this 指向 window不是 按钮了
        //     document.querySelector('.btn1').style.color = 'pink'
        // })
        
        document.querySelector('.btn2').addEventListener('click',function () {
            this.disabled = true
            // setTimeout(function () {
            //     console.log(this) // 定时器里面的this 指向 window
            //     this.disabled = false
            // },5000)

            setTimeout(() => {
                console.log(this) // 获取到了 button 按钮
                this.disabled = false
            },2000)
        })
    </script>
</body>
</html>